<template>
  <transition>
    <template v-if="item.children">
      <el-submenu :index="item.fullpath||item.path">
        <template slot="title">
          <i :class="item.icon" v-if="item.icon&&this.icontype==0"></i>
          <i class="el-icon-none" v-if="item.icon&&this.icontype==1">
            <v-icon scale="1.2" :name="this.item.icon"></v-icon>
          </i>
          <span>{{item.name}}</span>
        </template>
        <route-menu :key="r.path" v-for="r in item.children" :item="r" @menu-click="menuClick"/>
      </el-submenu>
    </template>
    <template v-if="!item.children">
      <el-menu-item :index="item.fullpath" @click="menuClick(item.fullpath)">
        <i :class="item.icon" v-if="item.icon&&this.icontype==0"></i>
        <i class="el-icon-none" v-if="item.icon&&this.icontype==1">
          <v-icon scale="1.2" :name="this.item.icon"></v-icon>
        </i>
        <span>{{item.name}}</span>
      </el-menu-item>
    </template>
  </transition>
</template>
<script>
import { mapState, mapActions } from "vuex";

export default {
  name: "route-menu",
  props: ["item"],
  computed: {
    icontype() {
      if (this.item.icon.indexOf("el-") != -1) {
        return 0;
      }
      return 1;
    },
    ...mapState({
      open_windows(state) {
        let list = state.global.open_windows.map(x => x);
        list.unshift({
          name: "首页",
          path: "home",
          closable: false,
          fullpath: "/admin/home"
        });
        return list;
      },
      active_window: state => state.global.active_window
    })
  },
  methods: {
    menuClick(path) {
      this.$emit("menu-click", path);
    }
  }
};
</script>

<style lang="scss">
@import "../element-variables.scss";
.el-icon-none {
  display: inline-block;
  text-align: center;
  transform: translateY(-1px);
}
</style>
